<template>
	<view class="container">
		<SearchBar :back="true" :focus="false" @search="onSearch"></SearchBar>			
		
	</view>
</template>

<script>
import amap from "../../js_sdk/js-amap/amap-wx.js";
import SearchBar from '../index/components/search.vue';
import {mapActions} from 'vuex'
export default{
	data(){
		return{
			latitude:'',//精度
			longitude:'',//维度
			markers:[],//标记点
			id:0, // 使用 marker点击事件 需要填写id
			title: 'map',
			mapInfo:{},//高德地图返回的信息
			showMap:false,//返回信息后显示地图
			amapPlugin:{},//引用高德地图插件
			system:{},//系统信息
			keyword:'',//搜索关键字
		}
	},
	components:{
		SearchBar
	},
	onLoad() {
		
	},
	onShow() {
		this.getSystemInfo();
		this.init();
	},
	methods:{
		...mapActions['setLocation'],
		onSearch(e){
			console.log(e);
		},
		// 获取设备宽高
		getSystemInfo(){
			uni.getSystemInfo({
				success: (res) => {
					console.log("设备",res);
					this.system = res;
				},
				fail: (err) => {
					uni.showToast({
						title:JSON.stringify(res),
						icon:'none'
					});
				}
			})
		},
		chooseLocation(){
			uni.chooseLocation({
				success: (res)=> {
					console.log('位置名称：' + res.name);
					console.log('详细地址：' + res.address);
					console.log('纬度：' + res.latitude);
					console.log('经度：' + res.longitude);
					this.latitude = res.latitude;
					this.longitude = res.longitude;
					this.setLocation({
						latitude:res.latitude,
						longitude:res.longitude
					})
				}
			})
		},
		openLocation(){
			uni.openLocation({
				latitude: this.latitude,
				longitude: this.longitude,
				name:this.mapInfo.name,
				address:this.mapInfo.desc,
				success: (response)=> {
					console.log('response',response);
				}
			})
		},
		getLocation(){
			uni.getLocation({
			    // type: 'wgs84',
				type:'gcj02',
			    success: (res)=>{
					this.latitude  = res.longitude;
					this.longitude  = res.longitude;
			        console.log('当前位置的经度：' + res.longitude);
			        console.log('当前位置的纬度：' + res.latitude);
					this.openLocation(res);
			    },
				fail: (err) => {
					console.log("err",err);
				},
				complete: (done) => {
					console.log("done",done)
				}
			});
		},
		closeMapMarker(){},
		mapUpdated(){},
		markertap(){},
		init(){
			this.amapPlugin = new amap.AMapWX({
				key:"20549ba8e49a4d6ab1898549debf308e"  //该key 是在高德中申请的微信小程序key
			});
			this.getRegeo();
			// this.getPoiAround();
			this.getWeather();
		},
		// 获取地址描述数据
		getRegeo(){
			this.amapPlugin.getRegeo({
				type: 'gcj02', //map 组件使用的经纬度是国测局坐标， type 为 gcj02
				success: (res)=> {
					console.log("高德地图",res);
					const latitude = res[0].latitude;
					const longitude = res[0].longitude;
					this.longitude = longitude;
					this.latitude = latitude;
					this.mapInfo = res[0];
					this.setLocation({
						latitude:this.latitude,
						longitude:this.longitude
					})
					// this.openLocation();
					this.getPoiAround();
				},
				fail: (res) => {
					// this.chooseLocation();
					this.getLocation();
					uni.showToast({
						title:JSON.stringify(res),
						icon:'none'
					});
				}
			});
		},
		// 获取周边服务
		getPoiAround(){
			this.amapPlugin.getPoiAround({
			  success: (data)=>{
				//成功回调
				console.log("data",data);
				let markers = data.markers;
				markers.map(item=>{
					item.width = item.width+'px';
					item.height = item.height+'px';
					item.iconPath = '../../static/image/map/shop.png';
					item.callout = {
						content:item.name,
						color:'#333',
						fontSize:'14',
						borderRadius:'4',
						bgColor:'#f5f5f5',
						padding:'10',
						// display:'BYCLICK',
						display:'ALWAYS',
						textAlign:'center',
					}
				})
				this.markers = markers;
				this.showMap = true;
			  },
			  fail: (info)=>{
				//失败回调
				console.log("info",info)
			  }
			})
		},
		// 查询指定城市的实时天气和预报天气
		getWeather(){
			this.amapPlugin.getWeather({
			  success: (data)=>{
				//成功回调
				console.log('天气',data);
			  },
			  fail: (info)=>{
				//失败回调
				uni.showToast({
					title:JSON.stringify(info),
					icon:'none'
				});
			  }
			})
		},
		
	}
}
</script>

<style>
page{
	background-color: #fff;
}
.container{
	background-color: transparent;
}
</style>
